<template>
  <view class="content">
    <u-sticky h5-nav-height="0">
      <view class="search">
        <view class="searchBox">
          <i class="iconfont icon-sousuo"></i>
          <input
            type="text"
            placeholder-style="color:#9B9B9B;"
            placeholder="请输入商品名称"
            v-model="goods_name"
            @confirm="clear"
          />
        </view>
      </view>
    </u-sticky>

    <view class="banner">
      <swiper class="bannerItem" autoplay indicatorDots :duration="500">
        <swiper-item class="bannerItem" v-for="item of banner" :key="item.id">
          <image
            class="bannerItem"
            mode="aspectFill"
            :src="item.pic_url"
            @click="handle('goUrl', item)"
          ></image>
        </swiper-item>
      </swiper>
    </view>

    <pageList
      :tab="tab"
      :active="active"
      :items="goods"
      @handle="handle"
    ></pageList>
    <view class="footerBox">
      <toolsMore :status="moreStatus"></toolsMore>
    </view>

    <view
      class="myOrder"
      @click="$utils.toUrl('/marketing/curPrice/order/list/index')"
      >我的砍价</view
    >
  </view>
</template>

<script>
import pageList from "./components/pageList";
import toolsMore from "@/components/tools/tools-more.vue";
import { cutPriceInfo, cutPriceGoodsList } from "@/api/marketing/curPrice";

export default {
  components: {
    pageList,
    toolsMore,
  },

  data() {
    return {
      goods: [],
      active: "",
      tab: [],
      goods_name: "",
      isEnd: false,
      limit: 10,
      page: 1,
      moreStatus: 1,

      type: 0,
      activity_id: "",
      banner: [],
      min_price: "0.00",
    };
  },

  async onLoad(opi) {
    if (opi.activity_cut_price_id) {
      this.activity_id = opi.activity_cut_price_id;
    }
    this.init(this.clear);
  },

  methods: {
    async init(fn) {
      const con = await cutPriceInfo({
        activity_id: this.activity_id,
      });
      if (!con.code) {
        let { cat, banner } = con;
        this.tab = cat || [];
        this.banner = banner || [];

        if (con.data) {
          this.min_price = con.data.min_price || "0.00";
        }
        if (cat && cat.length) {
          this.active = cat[0].id;
        }
      }

      fn && fn();
    },

    async clear() {
      this.goods = [];
      this.isEnd = false;
      this.page = 1;

      this.getGoodsList();
    },

    handle(type, item) {
      switch (type) {
        case "tab":
          if (this.active !== item.id) {
            this.active = item.id;
            this.clear();
          }
          break;

        case "goUrl":
          if (item.url) {
            let { link, open_type } = JSON.parse(item.url);
            this.$utils.toUrl(link, open_type);
          }
          break;

        case "detail":
          this.$utils.toUrl(
            `/goods/goods/goods?id=${item.id}&activity_cut_price_id=${item.activity_id}`
          );
          break;
      }
    },

    async getGoodsList() {
      let {
        limit: pageSize,
        page,
        goods_name,
        active: cat_id,
        activity_id,
      } = this;
      this.moreStatus = 2;

      const goodsRes = await cutPriceGoodsList({
        pageSize,
        page,
        goods_name,
        cat_id,
        activity_id,
      });

      if (!goodsRes.code) {
        let goodsExtList = goodsRes.goods_ext.list;
        this.moreStatus = 1;
        uni.stopPullDownRefresh();

        let { goods: oldList } = this,
          { totalCount: row_count } = goodsRes.goods_ext,
          list = goodsRes.goods_list;

        if (list.length) {
          list = this.mergeGoodsList(goodsExtList, list);
          oldList.push(...list);
          this.page = this.page + 1;
        }

        if (oldList.length >= parseInt(row_count)) {
          this.isEnd = true;
          this.moreStatus = 3;
        }
      }
    },

    mergeGoodsList(oldList = [], newList = []) {
      newList.forEach((el) => {
        let item = oldList.find(
          (e) => parseInt(el.id) === parseInt(e.goods_id)
        );

        if (item) {
          el.userCount = item.userCount;
          el.oldPrice = el.price;
          el.price = item.price;
          el.activity_id = item.activity_id;
        }
      });

      return newList;
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getGoodsList();
  },

  onPullDownRefresh() {
    this.clear();
  },
};
</script>

<style lang="less" scoped>
.footerBox {
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}

.content {
  background: #f0f0f0;
  min-height: 100vh;
}

.search {
  padding: 10rpx 30rpx;
  background: #f0250e;
}

.searchBox {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  border-radius: 32px;
  background: #f2f2f2;

  input {
    margin-left: 10rpx;
    flex: 1;
    height: 64rpx;
    overflow: hidden;
    font-size: 26rpx;
    color: #333;
  }

  .iconfont {
    color: #9b9b9b;
  }
}

.bannerItem {
  position: relative;
  z-index: 2;
  height: 240rpx;
  width: 100%;
  border-radius: 10px;
}

.banner {
  position: relative;
  padding: 20rpx 24rpx 10rpx;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(360deg, #f5f5f5 0%, #f0250e 100%);
  }
}
.myOrder {
  position: fixed;
  right: 0;
  top: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140rpx;
  height: 54rpx;
  background: #ffffff;
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.05);
  border-radius: 28rpx 0rpx 0rpx 28rpx;
  font-size: 24rpx;
  color: #f0250e;
  font-weight: bold;
}
</style>
